<template>
	<view>
		<view style="padding: 20rpx;"><u-search @search="search" @custom="search" placeholder="请输入搜索内容"
				v-model="searchValue"></u-search></view>
		<view>
			<view v-if="list.length == 0">
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</view>
			<view v-for="(item, index) in list" :key="index">
				<view class="u-page">
					<view class="u-demo-block">
						<view class="u-demo-block__content">
							<view class="album">
								<view class="album__avatar" @click="gotoContent(item)">
									<image :src="item.avatar" mode="" style="width: 32px;height: 32px;">
									</image>
								</view>
								<view class="album__content">
									<view style="position: absolute;padding-left: 120rpx; padding-top: 10rpx;">
									</view>
									<view>
										<u--text :text="item.nickname" type="primary" bold size="17"
											@click="gotoContent(item)">
										</u--text>
										<u-icon :name="item.gender == '男'?'man':'woman'" color="red"></u-icon>
									</view>

									<view style="padding-top: 20rpx;color: #aaabbb;" @click="gotoContent(item)">
										<view style="position: absolute; font-size: 25rpx;padding-left: 32rpx;">
											{{item.postAddress}}
										</view>
										<u-icon name="map">{{item.postAddress}}</u-icon>
									</view>
									<u--text margin="20px 0px 8px 0" :text="item.postContent"
										@click="gotoContent(item)"></u--text>
									<u-album :urls="item.picture"></u-album>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="padding-left: 120rpx; padding-right: 430rpx; padding-top: 10rpx; padding-bottom: 10rpx;">
					<u-tag :text="item.tagList.name" type="warning" icon="tags"></u-tag>
				</view>
				<view style="padding-left: 88rpx;">
					<view
						style="position: absolute; font-size: 25rpx; padding-left: 535rpx; padding-top: 17rpx; color: #aaaaaa;"
						@click="actThumbPost(item)">
						({{item.thumbNum}})</view>
					<view style="position: absolute; padding-left: 500rpx; padding-top: 20rpx;">
						<u-icon v-if="item.thumbList.indexOf(userId) === -1" color="red" name="heart"
							@click="actThumbPost(item)"></u-icon>
						<u-icon v-if="item.thumbList.indexOf(userId) !== -1" color="red" name="heart-fill"
							@click="actThumbPost(item)"></u-icon>
					</view>
				</view>
				<view style="padding-left: 450rpx; position: absolute; padding-top: 17rpx; width: 10%; z-index: 9999;"
					@click="gotoContent(item)">
					<image style="position: absolute; width: 45rpx; height: 40rpx; padding-left: 30rpx;"
						src="../../static/reply.png">
					</image>
					<!-- <view style="padding-left: 50rpx; font-size: 20rpx; color: #aaabbb;">评论</view> -->
				</view>
				<view style="font-size: 30rpx; color: #cccbbb; padding-left: 80rpx; padding-top: 10rpx;">
					{{item.createTime}}
				</view>
				<view class="dividerThin"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				start: 1,
				length: 5,
				isLastPage: false,
				searchValue:'',
			}
		},
		onShow() {
			
		},
		onLoad() {
			let that = this;
			that.userId = uni.getStorageSync("userId");
			that.loadPost(that);
		},
		onReachBottom() {
			let that = this;
			if (that.isLastPage) {
				return;
			}
			that.start = that.start + 1;
			that.loadPost(that);
		},
		methods: {
			gotoContent(item) {
				uni.navigateTo({
					url: '/pages/post_content/post_content?postId=' + item.id
				})
			},
			actThumbPost(item) {
				let that = this;
				that.$ajax(that.$url.actThumbPost + "?postId=" + item.id, "GET", null, function(resp) {
					that.isThumb = resp.data.result
					if (that.isThumb == false) {
						uni.showToast({
							icon: 'none',
							title: '取消点赞'
						})

					} else {
						uni.showToast({
							icon: 'none',
							title: '成功点赞'
						})
					}
					that.loadPost(that);
				})
			},
			loadPost(ref) {
				let that = this;
				let data = {
					start: ref.start,
					length: ref.length,
					searchValue: ''
				}
				that.$ajax(that.$url.searchMyPost, "POST", data, function(resp) {
					if (resp.data.result == null || resp.data.result.length == 0) {
						ref.isLastPage = true;
						ref.start = ref.start - 1;
						uni.showToast({
							icon: 'none',
							title: '已经到底了'
						});
					} else {
						if (ref.start == 1) {
							ref.list = [];
						}
						ref.list = ref.list.concat(resp.data.result);
					}

				})
			},
			search() {
				let that = this;
				let data = {
					start: 1,
					length: 88,
					searchValue: that.searchValue
				}
				that.$ajax(that.$url.searchMyPost, "POST", data, function(resp) {
					that.list = resp.data.result;
				})
				// uni.navigateTo({
				// 	url: '/pages/search_post_result/search_post_result?searchValue=' + that.searchValue
				// })
			},
		}
	}
</script>

<style lang="scss">
	.dividerThin {
		margin-top: 30rpx;
		height: 5px;
		/* 设置分割线高度 */
		background-color: #eeeeee;
		/* 设置分割线颜色为灰色 */
	}

	.album {
		padding: 20rpx;
		padding-top: 50rpx;
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 3px;
			border-radius: 300px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}
</style>